<template>
  <div>
    <a-divider>分隔符</a-divider>
    <a-table
      size="small"
      bordered
      :scroll="{ x: 1000, y: 400 }"
      :customHeaderRow="()=>{return { style: { background: '#f2f2f2' } }}"
      :pagination="false"
      :data-source="list">
      <a-table-column
        key="sort"
        fixed="left"
        :width="50"
        title="序号">
        <template slot-scope="text,record,index">
          {{ index+1 }}
        </template>
      </a-table-column>
      <a-table-column
        v-for="(h,i) in headers"
        :key="`column${i}`"
        :title="h.label">>
        <template slot-scope="text,record">
          <ZgInput :disabled="!record.isEdit" v-model="record[h.code]" v-if="h.compType==='单行文本'"></ZgInput>
          <ZgDictionary :disabled="!record.isEdit" v-model="record[h.code]" v-if="h.compType==='字典'" :code="h.extra.字典类型"></ZgDictionary>
          <ZgDatePicker :disabled="!record.isEdit" v-model="record[h.code]" v-if="h.compType==='日期'"></ZgDatePicker>
          <ZgSelect :disabled="!record.isEdit" v-model="record[h.code]" v-if="h.compType==='下拉选择'" :options="h.extra.下拉选项"></ZgSelect>
          <ZgSwitch :disabled="!record.isEdit" v-model="record[h.code]" v-if="h.compType==='开关'"></ZgSwitch>
        </template>
      </a-table-column>
      <a-table-column
        key="handle"
        fixed="right"
        :width="160"
        title="操作">
        <template slot-scope="text,record,index">
          <div class="flx-a">
            <a-button shape="circle" v-if="!record.isEdit" @click="toEdit(record)">
              <i class="fa fa-edit"/>
            </a-button>
            <a-button shape="circle" v-if="record.isEdit" @click="toSave(record)">
              <i class="fa fa-save"/>
            </a-button>
            <a-button shape="circle" @click="toAdd(index)">
              <i class="fa fa-plus"/>
            </a-button>
            <a-button shape="circle" @click="toDel(index)">
              <i class="fa fa-minus"/>
            </a-button>
          </div>
        </template>
      </a-table-column>
    </a-table>
    <div v-if="list.length===0" class="wfull flx-c mt10">
      <ZgButton icon="plus-circle" @click="toAdd(0)">添加数据</ZgButton>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    formCode: {
      type: String,
      default: 'form_test'
    }
  },
  data () {
    return {
      list: [
        { name: 'zxb', sex: '男', birth: '', job: '', isOpen: false, isEdit: false },
        { name: 'zxb', sex: '男', birth: '', job: '', isOpen: false, isEdit: false }
      ],
      headers: [
        { code: 'name', label: '姓名', compType: '单行文本' },
        { code: 'sex', label: '性别', compType: '字典', extra: { 字典类型: 'viewType' } },
        { code: 'birth', label: '出生日期', compType: '日期' },
        { code: 'job', label: '工作', compType: '下拉选择', extra: { 下拉选项: [{ value: '1', label: '男' }, { value: '2', label: '女' }] } },
        { code: 'isOpen', label: '是否开启', compType: '开关' }
      ]
    }
  },
  mounted () {
  },
  methods: {
    toEdit (record) {
      record.isEdit = true
    },
    toSave (record) {
      record.isEdit = false
    },
    toAdd (i) {
      this.list.splice(i + 1, 0,
        { name: 'zxb', sex: '男', birth: '', job: '', isOpen: false, isEdit: true }
      )
    },
    toDel (i) {
      this.list.splice(i, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
